<template>
  <div class="layout">
    <aside class="layout-side">
      <m-side-bar :tree-data="treeData" @on-listClick="routerGo"></m-side-bar>
    </aside>
    <section class="layout-main">
      <router-view></router-view>
    </section>
  </div>
</template>
<script>
import MSideBar from '@/widgets/mSideBar/index'
export default {
  name: 'Layout',
  components: {
    MSideBar
  },
  props: {

  },
  data () {
    return {


    }
  },
  computed: {
    treeData() {
      let rList = this.$router.options.routes[1].children
      let obj = {}
      for (let i = 0; i < rList.length; i++) {
        let gName = rList[i].meta.gName;
        if(!obj[gName]) {
          obj[gName] = [rList[i]]
        } else {
          obj[gName].push(rList[i])
        } 
      }
      return obj
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    routerGo(path) {
      this.$router.push({
        path: path
      })
      // console.log(path)
    }
  }
}
</script>
<style scope lang="stylus">
.layout
  display: flex
  flex-flow row nowrap
  width: 100%
  height: 100%
  &-side
    flex: 0 0 200px
    width 200px
    height 100%
    padding: 5px 10px
    background-image: linear-gradient(90deg,#EDF0FC 0, #ffffff 100%)
  &-main
    flex 1
    width calc(100% - 200px)
    height 100%
</style>
